<template>
	<div>
		<div class="tools">
			<div class="flex_lr_m" style="padding: 8px 24px;">
				 <el-button style="width: 35%;"  @click.stop="prePage">上一页</el-button>
				 <div class="page">{{pageNum}}/{{pageTotalNum}} </div>
				 <el-button style="width:35%;" @click.stop="nextPage" >下一页</el-button>
			</div>
		</div>
		<pdf ref="pdf" class="pdfSty" 
		:src="url" 
		:page="pageNum"
		:rotate="pageRotate"  
		@progress="loadedRatio = $event"
		@page-loaded="pageLoaded($event)" 
		@num-pages="pageTotalNum=$event" 
		@error="pdfError($event)" 
		@link-clicked="page = $event">
		</pdf>
	</div>
</template>

<script>
	import pdf from 'vue-pdf'
	export default {
		name: 'readPDF',
		components: {
			pdf
		},
		data() {
			return {
				url: "",
				pageNum: 1,
				pageTotalNum: 1,
				pageRotate: 0,
				// 加载进度
				loadedRatio: 0,
				curPageNum: 0,
			}
		},
		created() {
			this.url=decodeURIComponent(this.$route.query.row)
			console.log(this.url)
		},
		mounted: function() {},
		methods: {
            // 上一页函数，
			prePage() {
				var page = this.pageNum
				page = page > 1 ? page - 1 : this.pageTotalNum
				this.pageNum = page
			},
            // 下一页函数
			nextPage() {
				var page = this.pageNum
				page = page < this.pageTotalNum ? page + 1 : 1
				this.pageNum = page
			},
            // 页面加载回调函数，其中e为当前页数
			pageLoaded(e) {
				this.curPageNum = e
			},
            // 其他的一些回调函数。
			pdfError(error) {
				console.error(error)
			},
		}
	}
</script>

<style scoped="scoped">
	.page{
		color: #989898;
	}
	.pdfSty{
		height: calc(100vh - 70px);
		margin-top: 14px;
	}
</style>
